<template>
  <div class="home-page">
    <div class="bg" v-if="true" />
    <v-header :home="home" v-if="true" />
    <category :home="home" v-if="true" />
    <swiper :home="home" />
    <product-day :home="home" v-if="false" />
    <product-group :home="home" v-if="false" />
    <product-brand :home="home" v-if="false" />
    <v-nav :home="home" />
    <div class="news" v-if="news.length > 0">
      <i class="cubeic-volume"></i>
      <div class="title" @click="$router.push(`/news/view/${news[0].id}`)">
        <span>{{ news[0].title }}</span>
      </div>
    </div>
    <div class="icon" @click="$router.push('/product/detail/996')" v-if="false">
      <div class="go">
        <img src="/home-img/go.gif" />
      </div>
    </div>
    <product-recommend :home="home" style="min-height: 300px" />
    <loading :show="loading" />
    <div class="image" v-if="false">
<!--      <img src="/home/1.jpg" class="i1" />-->
<!--      <img src="/home/2.jpg" />-->
<!--      <img src="/home/3.jpg" />-->
<!--      <img src="/home/4.jpg" />-->
<!--      <img src="/home/5.jpg" />-->
<!--      <img src="/home/6.jpg" class="i2" />-->
      <img src="/home-img/all.jpg" class="all" />
    </div>
    <div class="tips" v-if="tips.length > 0 && false">
      <cube-slide
        :data="tips"
        :speed="500"
        :interval="3000"
        :showDots="false"
        :direction="'vertical'"
        class="swiper"
      >
        <cube-slide-item
          v-for="(item, index) in tips"
          :key="index"
          class="item"
        >
          <div class="avatar">
            <img :src="item.user.avatar" />
          </div>
          <div class="text">
            {{item.user.nickname}} 刚刚购买了【小水库】，成为水妍宝店主
          </div>
        </cube-slide-item>
      </cube-slide>
    </div>
    <div class="version" v-if="$store.getters['System/versionInfo']">{{ $store.getters['System/versionInfo'].info.copyright }}</div>
  </div>
</template>

<script>
import Header from './components/Header'
import Category from './components/Category'
import Swiper from './components/Swiper'
import Nav from './components/Nav'
import ProductDay from './components/ProductDay'
import ProductGroup from './components/ProductGroup'
import ProductBrand from './components/ProductBrand'
import ProductRecommend from './components/ProductRecommend'

import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
export default {
  name: 'Home',
  components: {
    'v-header': Header,
    Category,
    Swiper,
    'v-nav': Nav,
    ProductDay,
    ProductGroup,
    ProductBrand,
    ProductRecommend,
    Loading
  },
  data() {
    return {
      home: {},
      loading: false,
      news: [],
      tips: [],
      num: 0
    }
  },
  methods: {
    /**
     * get uni home data
     * 1) vuex
     * 2) localstorage
     * 3) redis
     * 4) db
     */
    fetchData() {
      const home = this.$store.getters['Home/home']
      if (home === null) {
        this.loading = true
        api.Uni.homePage().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Home/set_data', data).then(() => {
            this.home = data
          })
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.home = home
      }
      // console.log(this.home)
    },
    getNews() {
      api.News.list().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.news = data.list
      })
      // api.Uni.homeNum().then(response => {
      //   let { data } = response
      //   data = base64.parse(data)
      //   this.num = data.num
      // })
    },
    goNews() {
      const id = this.news[0].id
      this.$router.push(`/news/view/${id}`)
    },
    getOrder() {
      api.Uni.homeTip().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.tips = data.list
      })
    }
  },
  created () {
    this.fetchData()
    this.getNews()
    // this.getOrder()
  }
}
</script>

<style scoped lang="stylus">
.home-page
  //background #f4ebfe
  //padding 10px 0
  .version
    margin 10px
    color #ccc
  .icon
    //background url("./images/icon.png") center no-repeat
    //background url("./images/icon2.png") center no-repeat
    background url("./images/icon3.png") center no-repeat
    background-size cover
    //height 143px
    height 152px
    margin 10px
    border-radius 10px
    position relative
    .go
      position absolute
      right -10px
      top 30px
      width 80px
      height 80px
      img
        display block
        width 80px
        height 80px
        margin auto
  .bg
    padding-bottom 10px
    background url("../../assets/images/home.png") center top no-repeat
    //background #e4c9ff
    background-size contain
    background-color $background_color
    min-height 500px
    margin-bottom -500px
    //filter blur(3px)
    //position fixed
    //width 100%
    //top 0
    //left 0
    //z-index -1
  .image
    margin 10px
    display flex
    flex-direction column
    //position relative
    img
      display block
      width 100%
      margin auto
      &.i1
        border-top-left-radius 5px
        border-top-right-radius 5px
      &.i2
        border-bottom-left-radius 5px
        border-bottom-right-radius 5px
      &.all
        border-radius 10px
  .news
    padding 10px 0
    margin 10px
    border-radius 5px
    display flex
    justify-items center
    background white
    i
      font-size 22px
      color $main_color
      width 30px
    .title
      flex 1
      text-align left
      color $main_color
      height 20px
      line-height 20px
      overflow hidden
      letter-spacing 2px
      //background red
      span
        display block
        font-weight 700
        animation 10s wordsLoop linear infinite normal

  .tips
    position fixed
    height 30px
    line-height 30px
    width 80%
    border-radius 20px
    z-index 3000
    background black
    //top 215px
    top 10px
    left 5px
    opacity 0.55
    .avatar
      width 30px
      display inline-block
      img
        height 30px
        width 30px
        border-radius 50%
    .text
      flex 1
      color white
      height 30px
      line-height 30px
      overflow hidden
      //background red
      width calc(100% - 30px)
      display inline-block
      text-align left
      text-indent 10px

// 文字滑动
@keyframes wordsLoop {
  0% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
@-webkit-keyframes wordsLoop {
  0% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
</style>
